<template>
  <div>
    <PublicHeader @showLogin="showLogin"></PublicHeader>
    <div class="videoDetail">
      <div class="wp">
        <ShowVideo></ShowVideo>
        <div class="detail">
          <VideoDesc></VideoDesc>
          <div class="tit">为您推荐</div>
          <div class="videoArea">
            <VideoList></VideoList>
          </div>
        </div>
      </div>
    </div>
    <LoginMod  v-show="isLoginShow"></LoginMod>
    <PublicFooter></PublicFooter>
  </div>
</template>

<script>
import PublicHeader from "@/components/common/publicheader/PublicHeader";
import PublicFooter from "@/components/common/publicfooter/PublicFooter";

import VideoList from "@/components/content/video/VideoList";

import LoginMod from "@/views/home/childComps/LoginMod";

import ShowVideo from "@/views/detail/childComps/ShowVideo";
import VideoDesc from "@/views/detail/childComps/VideoDesc";
import {nextTick, ref} from "vue";
export default {
  name: "VideoDetail",
  setup(){
    let isLoginShow=ref(false)
    function showLogin(){
      isLoginShow.value=false
      nextTick(()=>{
        isLoginShow.value=!isLoginShow.value
      })
    }
    return {
      isLoginShow,
      showLogin
    }
  },
  components:{
    PublicHeader, PublicFooter,
    VideoList,
    LoginMod,
    ShowVideo,VideoDesc
  }
}
</script>

<style scoped>
.videoDetail{
  margin-top: 94px;
}
.videoDetail .wp{
  width: 90%;
  margin: 0 auto;
  display: flex;
}
.videoDetail .detail{
  width: 100%;
  margin-left: 3%;
  margin-top: 80px;
}
.videoDetail .tit{
  font-size: 24px;
  color: #ef943c;
  padding-bottom: 10px;
  border-bottom: 2px solid #ef943c;
  margin-bottom: 20px;
}
.videoDetail{
  background-color: #0c0e1d;
}
</style>